
<template>
  <div class="container">
    <!-- <el-row :gutter="23" class="titles">
      <el-col :span="23">
        <el-card shadow="always">
          <p class="titles">每日同步记录表</p>
        </el-card>
      </el-col>
    </el-row> -->
    <!-- 表格 -->
    <div class="tableList">
      <el-table
        :data="findsynchronousRecordingByTimeList"
        title="每日同步记录表"
        size="small"
        row-class-name="row"
        cell-class-name="column"
        :highlight-current-row="true"
        v-loading = "isLoading"
        element-loading-text = "数据正在加载中"
        element-loading-spinner = "el-icon-loading"
      >
        <el-table-column
          label="同步日期"
        >
          <template slot-scope="scope">
            <i class="el-icon-time" />
            <span style="margin-left: 10px">{{ scope.row.synchronization_time }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="数据来源"
        >
          <template slot-scope="scope">
            <el-popover trigger="hover" placement="top">
              <p>数据来源: {{ scope.row.data_sources }}</p>
              <p>时间: {{ scope.row.synchronization_time }}</p>
              <div slot="reference" class="name-wrapper">
                <el-tag size="medium">{{ scope.row.data_sources }}</el-tag>
              </div>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column
          label="数据同步类型"
        >
          <template slot-scope="scope">
            <el-popover trigger="hover" placement="top">
              <div slot="reference" class="name-wrapper">
                <el-tag size="medium">{{ scope.row.synchronization_type }}</el-tag>
              </div>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column
          label="同步内容"
        >
          <template slot-scope="scope">
            <i class="el-icon-star-off" />
            <span style="margin-left: 10px">同步了{{ scope.row.counts }}条数据</span>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              size="small"
              type="danger"
              @click="findsynchronousRecordingByOneDay(scope.$index, scope.row)"
            >同步详情</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 分页 -->
    <div class="tablePage" style="text-align:right;">
      <pagination v-show="total>0" :total="total" :page.sync="pagination.num" :limit.sync="pagination.size" @pagination="findsynchronousRecordingByTimeLists" />
    </div>
    <el-dialog :title="'同步详情:'+titleTime" :visible.sync="dialogTableVisible" center :append-to-body="true" :lock-scroll="false" width="60%">
      <findsynchronousRecordingByOneDay :findsynchronousRecordingByOneDays="findsynchronousRecordingByOneDays" :totals="totals" :synchronization_time ="synchronization_time" :data_sources ="data_sources" :synchronization_type ="synchronization_type"/>
    </el-dialog>
  </div>
</template>

<script>
import Pagination from '@/components/Pagination'
import findsynchronousRecordingByOneDay from '@/views/studentInfo/findsynchronousRecordingByOneDay'
export default {
    name:'SyncRecord',
  components: { Pagination, findsynchronousRecordingByOneDay },
  data() {
    return {
      isLoading:false,
      findsynchronousRecordingByTimeList: [],
      findsynchronousRecordingByOneDays: [],
      synchronization_time: '',
      data_sources: '',
      synchronization_type: '',
      tableHeight: window.outerHeight - 320,
      pagination: {
        size: 15,
        num: 1
      },
      total: 0,
      totals: 0,
      dialogTableVisible: false,
      titleTime: ''
    }
  },
  mounted() {
    this.isLoading = true;
    this.findsynchronousRecordingByTimeLists()
  },
  methods: {
    findsynchronousRecordingByTimeLists(params = {}) {
      params.pageSize = this.pagination.size
      params.pageNum = this.pagination.num
      this.$get('copyData/findsynchronousRecordingByTime', {
        ...params
      }).then((r) => {
        this.isLoading = false;
        this.findsynchronousRecordingByTimeList = r.data.data
        this.total = r.data.count
      })
    },
    findsynchronousRecordingByOneDay(index, row) {
      var params1 = {}
      params1.pageSize = 10
      params1.pageNum = 0
      this.synchronization_time = ''
      this.data_sources = ''
      this.synchronization_type = ''
      params1.synchronousRecordingByTime = row.synchronization_time
      params1.data_sources = row.data_sources
      params1.synchronization_type = row.synchronization_type
      this.titleTime = row.synchronization_time 
      this.synchronization_time = row.synchronization_time
      this.data_sources = row.data_sources
      this.synchronization_type = row.synchronization_type
      this.$get('copyData/findsynchronousRecordingByOneDay', {
        ...params1
      }).then((r) => {
        const data = r.data.data
        this.findsynchronousRecordingByOneDays = data
        this.totals = row.counts
        this.loading = true
      })
      this.dialogTableVisible = true
    }
  }
}
</script>

<style>
.container {
  padding: 10px;
}
.el-button {
  padding: 7px 10px;
}
</style>


